<style lang="less" scoped>
    .order {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
            .row{
                margin-top: 5px;
                display: flex;
                align-items: flex-start;
                .label{
                    width: 90px;
                    min-width: 90px;
                    text-align: right;
                }
                .value{
                    text-align: left;
                }
            }
        }
    }
</style>
<template>
    <div class="order">
        <div class="left">
            <card-table
                cardtitle="订单列表"
                addbuttext="新建订单"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="data">
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="订单详情" :showright="true"  icon="compose" cardbtn="编辑" @cardrightclick="ddxqclick">
                <ul v-if="current">
                    <li>
                        <div class="row">
                            <p class="label">订单编号：</p>
                            <p class="value">{{ current.nub }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">客户订单号：</p>
                            <p class="value">{{ current.customernub }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">客户编号：</p>
                            <p class="value">{{ current.customermsg.nub }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">客户名称：</p>
                            <p class="value">{{ current.customermsg.name }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">客户地址：</p>
                            <p class="value">{{ current.customermsg.address }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">联系人：</p>
                            <p class="value">{{ current.customermsg.contacts }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">联系方式：</p>
                            <p class="value">{{ current.customermsg.phone }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">产品编号：</p>
                            <p class="value">{{ current.product.nub }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">产品名称：</p>
                            <p class="value">{{ current.product.name }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">图号：</p>
                            <p class="value">{{ current.product.version }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">交期：</p>
                            <p class="value">{{ current.delivery }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">预计出货时间:</p>
                            <p class="value">{{ current.deliveryTime }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">数量:</p>
                            <p class="value">{{ current.completed + '/' + current.number + current.product.unit }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p class="label">批次:</p>
                            <p class="value">{{ current.batch + '/' + current.allbatch }}</p>
                        </div>
                    </li>
                </ul>
            </my-card>
            <my-card cardtitle="工单列表" :showright="false"  icon="compose" cardbtn="查看" @cardrightclick="gdclick" style="margin-top: 10px">
                <ul style="text-align: left;overflow: hidden;margin-bottom: 20px"  v-if="current != null">
                    <li v-for="work in current.work" style="height: 32px;line-height: 32px">
                        <div style="display: flex;justify-content:space-between;">
                            <span>{{ work.nub }}</span>
                            <span>{{ work.number + current.product.unit }}</span>
                            <span :style="work.type | worktypestyle">{{ work.type | worktype }}</span>
                        </div>
                    </li>
                </ul>
            </my-card>
        </div>
        <add-order v-model="addorder" ref="addorder" :customer="customer" :product="product" @addorderupdate="addorderupdate"></add-order>
        <edit-order v-model="editorder" ref="editorder" :customer="customer" :product="product" @editorderupdate="addorderupdate"></edit-order>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import orderdata from './orderdata.js'
    import AddOrder from './addorder.vue'
    import EditOrder from './editorder.vue'
    import workorder from './workorderdata.js'
    export default {
        name: 'order',
        data () {
            return {
                role: false,
                customer: this.$store.state.customer,
                product: this.$store.state.product,
                addorder: false,
                editorder: false,
                workorder: [],
                columns: [
                    {
                        title: '订单编号',
                        key: 'nub',
                        width: 180
                    },
                    {
                        title: '客户订单编号',
                        key: 'customernub',
                        width: 180
                    },
                    {
                        title: '客户信息',
                        key: 'customermsg',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.customermsg.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.customermsg.nub),
                                    h('p', '名称：' + params.row.customermsg.name),
                                    h('p', '地址：' + params.row.customermsg.address),
                                    h('p', '联系人：' + params.row.customermsg.contacts),
                                    h('p', '联系电话：' + params.row.customermsg.phone)
                                ])
                            ])
                        }
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 120,
                        render: (h, params) => {
                            return h('span', params.row.completed + '/' + params.row.number + params.row.product.unit)
                        }
                    },
                    {
                        title: '产品',
                        key: 'product',
                        render: (h, params) => {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: "left"
                                }
                            }, [
                                h('Tag', params.row.product.name),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('p', '编号：' + params.row.product.nub),
                                    h('p', '名称：' + params.row.product.name),
                                    h('p', '单位：' + params.row.product.unit),
                                    h('p', '版本号：' + params.row.product.version)
                                ])
                            ])
                        }
                    },
                    {
                        title: '交期',
                        key: 'delivery'
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '订单号',
                        value: 'nub'
                    },
                    {
                        label: '客户订单号',
                        value: 'customernub'
                    },
                    {
                        label: '客户编号',
                        value: 'customermsg-nub'
                    },
                    {
                        label: '客户名称',
                        value: 'customermsg-name'
                    },
                    {
                        label: '数量',
                        value: 'number'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'customernub': '',
                    'customermsg-nub': '',
                    'customermsg-name': '',
                    'number': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '订单号',
                        key: 'nub',
                        placeholder: '输入订单编号'
                    },
                    {
                        label: '客户订单号',
                        key: 'customernub',
                        placeholder: '输入客户订单编号'
                    },
                    {
                        label: '客户编号',
                        key: 'customermsg-nub',
                        placeholder: '输入客户编号'
                    },
                    {
                        label: '客户名称',
                        key: 'customermsg-name',
                        placeholder: '输入客户名称'
                    },
                    {
                        label: '数量',
                        key: 'number',
                        placeholder: '输入订单产品数量'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        watch: {
            '$store.state.customer': {
                handler: function (val, oldVal) {
                    this.customer = val
                },
                deep: true
            },
            '$store.state.product': {
                handler: function (val, oldVal) {
                    this.product = val
                },
                deep: true
            },
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '41'
                    }) ? true : false
                },
                deep: true
            }
        },
        filters: {
            worktype: function (value) {
                let text = '未知'
                switch (value) {
                    case '1':
                        text = '已生产';
                        break;
                    case '3':
                        text = '未生产';
                        break;
                    case '2':
                        text = '计划中';
                        break;
                }
                return text
            },
            worktypestyle: function (value) {
                let style = {
                    color: 'red'
                }
                switch (value) {
                    case '1':
                        style.color = '#ccc'
                        break;
                    case '3':
                        style.color = '#0000ff'
                        break;
                    case '2':
                        style.color = '#00ff00'
                        break;
                }
                return style
            }
        },
        methods: {
            addorderupdate (data) {
                this.data = data
            },
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addorder = true
                console.log('customer触发了添加事件')
            },
            refresh () {
                this.http.getAllOrder(this, {})
                this.http.getOrderItem(this, {})
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            ddxqclick () { //  订单详情按钮
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                let form = {
                    id: this.current.id,
                    customernub: this.current.customernub,
                    number: this.current.number,
                    allbatch: this.current.allbatch,
                    delivery: new Date(this.current.delivery).getTime(),
                    deliveryTime: new Date(this.current.deliveryTime).getTime()
                }
                this.$refs.editorder.setForm(form)
                this.editorder = true
            },
            gdclick () { //  工单列表查看按钮
                let test = {
                    name: '工单列表',
                    id: 'workorder',
                    type: true,
                    params: { id: this.current.customermsg.nub, key: 'dd'},
                    url: '/main/workorder/'+this.current.customermsg.name+'/key/'+'dd'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            }
        },
        components: {
            CardTable,
            MyCard,
            AddOrder,
            EditOrder
        },
        mounted: function () {
            this.http.getAllOrder(this, {})
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '41'
            }) ? true : false
            //this.http.getOrderItem(this, {})
        }
    };
</script>
